import React, { useEffect, useState } from 'react'
import { Menu, message } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import * as Icons from '@ant-design/icons'
import type { MenuProps } from 'antd'
import useUserStore from '@/store/user'
// import { getUserMenus } from '@/api/permission'

// 定义API响应类型
interface ApiResponse<T> {
  code: number
  message: string
  data: T
  isSuc: boolean
}

// 菜单项类型
interface MenuItem {
  id: number
  title: string
  icon: string
  path: string
  name: string
  filePath: string | null
  parentId: number
  children: MenuItem[]
}

const menuStyle: React.CSSProperties = {
  minHeight: 'calc(100vh - 60px)',
  textAlign: 'left',
}

type AntdMenuItem = Required<MenuProps>['items'][number]

const MyMenuSider: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const { userInfo } = useUserStore()
  const [items, setItems] = useState<AntdMenuItem[]>([])
  const [currentKey, setCurrentKey] = useState<string[]>(['/'])
  const [loading, setLoading] = useState<boolean>(false)

  // 获取Antd图标组件
  const getIcon = (iconName: string) => {
    if (!iconName || iconName === ' ') return null
    
    const IconComponent = (Icons as any)[`${iconName}Outlined`] || (Icons as any)[iconName]
    return IconComponent ? React.createElement(IconComponent) : <Icons.AppstoreOutlined />
  }

  // 静态菜单数据
  const staticMenus = [
    {
      id: 1,
      title: '首页',
      icon: 'Home',
      path: '/',
      name: '首页',
      parentId: 0,
      children: []
    },
    {
      id: 2,
      title: '基本管理',
      icon: 'ShoppingOutlined',
      path: '',
      name: '商品管理',
      parentId: 0,
      children: [
        {
          id: 3,
          title: '产品管理',
          icon: 'UnorderedList',
          path: 'product',
          name: '商品列表',
          parentId: 2,
          children: []
        },
        {
          id: 4,
          title: '箱子类型管理',
          icon: 'InboxOutlined',
          path: 'boxType',
          name: '箱子类型管理',
          parentId: 2,
          children: []
        },
      ]
    },
    {
      id: 6,
      title: '订单管理',
      icon: 'ShoppingCart',
      path: 'orderList',
      name: '订单管理',
      parentId: 0,
      children: []
    }
  ]

  // 将后端菜单数据转换为Antd Menu组件需要的格式
  const convertMenusToItems = (menuItems: any[]): AntdMenuItem[] => {
    return menuItems.map((menu) => {
      // 如果有子菜单且没有路径，则作为父级菜单
      if (menu.children && menu.children.length > 0 && !menu.path) {
        return {
          key: String(menu.id),
          label: menu.title,
          icon: getIcon(menu.icon),
          children: convertMenusToItems(menu.children)
        }
      } else {
        // 否则作为可点击的菜单项
        return {
          key: menu.path || String(menu.id),
          label: menu.title,
          icon: getIcon(menu.icon)
        }
      }
    })
  }

  useEffect(() => {
    // 使用静态菜单数据
    setItems(convertMenusToItems(staticMenus))
  }, [])

  useEffect(() => {
    const path = location.pathname.substring(1) || '/'
    setCurrentKey([path])
  }, [location.pathname])

  const onClick: MenuProps['onClick'] = (e) => {
    // 只有当key是有效路径时才导航
    if (e.key && e.key !== 'undefined' && !e.key.startsWith('sub')) {
      navigate(e.key)
    }
  }

  return (
    <Menu
      style={menuStyle}
      onClick={onClick}
      selectedKeys={currentKey}
      mode="inline"
      items={items}
      theme="dark"
    />
  )
}

export default MyMenuSider
